<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>登录</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/vue_resource.js"></script>
		<!-- Bootstrap core CSS-->
		<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<!-- Custom fonts for this template-->
		<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<!-- Custom styles for this template-->
		<link href="css/sb-admin.css" rel="stylesheet">
		<style>
			body{
				background-image: url(image/1.jpg);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.input{
				background: none;
			}
			.font{
				/*color: white;*/
			}
		</style>
	</head>

	<body>
		<div id="login" class="container" style="width:500px ;">
			<div class="card card-login mx-auto mt-5" style="background-color: rgba(0,0,0,0.1);">
				<div class="card-header font">登录</div>
				<div class="card-body">
					<form>
						<div class="form-group font">
							<label for="exampleInputEmail1">用户名</label><span id="i1"></span>
							<input  placeholder="请输入用户名" @blur="login1()" v-model="userName" class="form-control input" id="name" type="text" aria-describedby="emailHelp" v-model="name">
						</div>
						<div class="form-group font">
							<label for="exampleInputPassword1">密码</label><span id="i2"></span>
							<input @blur="login2()" placeholder="请输入密码" v-model="passWord" class="form-control input" id="password" type="password" v-model="pw">
						</div>
						<div class="form-group font">
							<div class="row">
								<div class="col-md-5">
									<label for="exampleInputEmail1">验证码</label>
									<input class="form-control input" v-model="code" id="code" type="text">
								</div>
								<div class="col-md-7" style="margin-top: 30px;">
									<a href="javascript:void(0);">
										<img id="imgVerify" src="http://localhost:8082/getVerify" height="36" width="170" onclick="getVerify(this);">
									</a>
								</div>
							</div>

						</div>
						<a class="btn btn-block font" @click="login()"  style="background-color: #E0E0E0;">登录</a>
						<a class="btn  btn-block font" style="background-color: #E0E0E0;" onclick="reset()">重置</a>
					</form>
					<div class="text-center">
						<a class="d-block small mt-3" href="register.html">注册</a>
						<a class="d-block small" href="forgot-password.html">忘记密码?</a>
					</div>
				</div>
			</div>
		</div>
		<!--Vue-->
		<!--<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/vue_resource.js" ></script>-->
		<!-- Bootstrap core JavaScript-->
		<script src="vendor/jquery/jquery.min.js"></script>
		<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
		<!-- Core plugin JavaScript-->
		<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
		<script type="text/javascript" src="js/md5.js"></script>

		<script>
			var url = "http://localhost:8082/";
			//获取验证码
			function getVerify() {
				// $("#imgCode").on("click", function() {
				$("#imgVerify").attr("src", url+'getVerify?' + Math.random()); //jquery方式
				// });
			}
		</script>
		<script>
			function reset(){
				document.getElementById("name").value = null;
				document.getElementById("i1").innerHTML = null;
				document.getElementById("password").value = null;
				document.getElementById("i2").innerHTML = null;
				document.getElementById("code").value = null;
			}
		</script>

		<script>
			var url = "http://localhost:8082/";
			var REuserName = /^[a-zA-Z]{1}\w{5,12}$/; //用户名正则表达式
			var REpassWord = /(?!.*\s)(?!^[\u4e00-\u9fa5]+$)(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{8,16}$/; //密码正则表达式
			var vm = new Vue({
				el: "#login",
				data: {
					msg: '',
					result: [],
					userName: '',
					passWord: '',
					code: '',
					token: '',
				},
				http: {
					root: '/',
					headers: {
						token: localStorage.getItem("token")
					}
				},
				methods: {
					/*getVerify() {
						// $("#imgCode").on("click", function() {
						$("#imgVerify").attr("src", 'http://localhost:8082/getVerify?' + Math.random()); //jquery方式
						// });
					},*/
					login1() {
						//用户名判断
						if(vm.userName == '') {
							document.getElementById("i1").innerHTML = "用户名不能为空";
							document.getElementById("i1").style.color = "red";
						}
						if(vm.userName != '' && !REuserName.test(vm.userName)) {
							document.getElementById("i1").innerHTML = "用户名错误";
							document.getElementById("i1").style.color = "red";
						}
						if(REuserName.test(vm.userName)) {
							document.getElementById("i1").innerHTML = "√";
							document.getElementById("i1").style.color = "green";
						}
					},
					login2() {
						//密码判断
						if(vm.passWord == '') {
							document.getElementById("i2").innerHTML = "密码不能为空";
							document.getElementById("i2").style.color = "red";
						}
						if(vm.passWord != '' && !REpassWord.test(vm.passWord)) {
							document.getElementById("i2").innerHTML = "密码格式错误";
							document.getElementById("i2").style.color = "red";
						}
						if(REpassWord.test(vm.passWord)) {
							document.getElementById("i2").innerHTML = "√";
							document.getElementById("i2").style.color = "green";
						}
					},
					login() {
						/*var passWord = document.getElementById("password").value;
						var pw = hex_md5(passWord);
						vm.passWord = pw;*/
						this.$http.post(url + "login", {
							userName: vm.userName,
							passWord: vm.passWord,
							ICode: vm.code,
						}, {
							emulateJSON: true
						}).then(
							function(res) {
								vm.result = res.body;
								// Storage.prototype.setExpire=(key, value, expire) =>{
								// 	let obj={
								// 		data:value,
								// 		time:Date.now(),
								// 		expire:expire,
								// 	};
								// }
								
								localStorage.setItem("token", vm.result.token);
								//localStorage.setExpire("token", vm.result.token,1);
								console.log(vm.result.success);
								if(vm.result.success == true) {
									if(vm.result.detail.access == 2) {
										//alert(vm.result.msg);
										location.href = "index.html";
									} else {
										//alert(vm.result.msg);
										location.href = "Administrator.html";
									}
								} else {
									alert(vm.result.msg);
									//alert("登录失败");
									//alert(vm.result.user.status);
									location.href = "login.html";
								}
							}
						)
					}
				}
			})
		</script>

	</body>

</html>